<template>
  <div class="max-w-4xl mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
      <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">拼音转换器</h2>
      
      <!-- 输入区域 -->
      <div class="mb-6">
        <textarea
          v-model="inputText"
          placeholder="请输入要转换的汉字..."
          rows="6"
          class="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
        ></textarea>
      </div>

      <!-- 转换选项 -->
      <div class="mb-6 space-y-4">
        <div class="flex flex-wrap gap-4">
          <label class="flex items-center space-x-2">
            <input
              type="radio"
              v-model="mode"
              value="pinyin"
              class="w-4 h-4 text-blue-500"
            />
            <span class="text-gray-700 dark:text-gray-300">拼音</span>
          </label>
          <label class="flex items-center space-x-2">
            <input
              type="radio"
              v-model="mode"
              value="initial"
              class="w-4 h-4 text-blue-500"
            />
            <span class="text-gray-700 dark:text-gray-300">声母</span>
          </label>
          <label class="flex items-center space-x-2">
            <input
              type="radio"
              v-model="mode"
              value="final"
              class="w-4 h-4 text-blue-500"
            />
            <span class="text-gray-700 dark:text-gray-300">韵母</span>
          </label>
        </div>
        
        <div class="flex flex-wrap gap-4">
          <label class="flex items-center space-x-2">
            <input
              type="checkbox"
              v-model="options.toneType"
              class="w-4 h-4 text-blue-500 rounded"
            />
            <span class="text-gray-700 dark:text-gray-300">显示声调</span>
          </label>
          <label class="flex items-center space-x-2">
            <input
              type="checkbox"
              v-model="options.pattern"
              class="w-4 h-4 text-blue-500 rounded"
            />
            <span class="text-gray-700 dark:text-gray-300">首字母大写</span>
          </label>
        </div>
      </div>

      <!-- 转换按钮 -->
      <div class="flex flex-wrap gap-4 mb-6">
        <button
          @click="convertToPinyin"
          class="px-4 py-2 rounded-lg bg-blue-500 hover:bg-blue-600 text-white font-medium transition-colors"
        >
          转换
        </button>
      </div>

      <!-- 结果区域 -->
      <div v-if="outputText" class="space-y-4">
        <div class="flex justify-between items-center">
          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">转换结果：</h3>
          <button
            @click="copyToClipboard"
            class="px-3 py-1 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors flex items-center gap-2"
            :title="copied ? '已复制！' : '复制到剪贴板'"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
            </svg>
            <span>{{ copied ? '已复制' : '复制' }}</span>
          </button>
        </div>
        <div class="w-full p-4 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
          {{ outputText }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { pinyin } from 'pinyin-pro';

const inputText = ref('');
const outputText = ref('');
const copied = ref(false);
const mode = ref<'pinyin' | 'initial' | 'final'>('pinyin');
const options = reactive({
  toneType: true,
  pattern: false
});

const convertToPinyin = () => {
  if (!inputText.value) return;

  try {
    let result = '';
    
    switch (mode.value) {
      case 'initial':
        result = pinyin(inputText.value, {
          type: 'array',
          toneType: 'none',
          mode: 'normal'
        }).map(item => item[0] || '').join(' ');
        break;
      case 'final':
        result = pinyin(inputText.value, {
          type: 'array',
          toneType: 'none',
          mode: 'normal'
        }).map(item => item.slice(1) || '').join(' ');
        break;
      default:
        result = pinyin(inputText.value, {
          toneType: options.toneType ? 'symbol' : 'none',
          mode: 'normal',
          type: 'string'
        });
    }

    outputText.value = result;
  } catch (err) {
    console.error('转换失败:', err);
  }
};

const copyToClipboard = async () => {
  try {
    await navigator.clipboard.writeText(outputText.value);
    copied.value = true;
    setTimeout(() => {
      copied.value = false;
    }, 2000);
  } catch (err) {
    console.error('复制失败:', err);
  }
};
</script> 